<template>
	<view class="wrap bggrey scrollWrapper">
		<view class="content zp-content">
			<view style="height: 100%;"></view>
			<view class="my-lucky">
				<LuckyWheel ref="myLucky" width="350vw" height="350vw" :blocks="blocks" :prizes="prizes"
					:buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
			</view>

			<view class="zp-hd-rules" style="pointer-events: auto; text-align: center; font-weight: 700;">

				<view>我的会员等级：{{getUserInfo.membershipStatus}}</view>
				<view style="margin-top: 0.16rem;">今日剩余抽奖次数：<text> {{getUserInfo.drawCount}}次</text></view>

			</view>

			<view class="title-row fcc">
				<image style="width: 8rem;" src="@/static/img/my/zp-txt1.png" mode="widthFix"></image>
			</view>

			<!-- 活动规则 -->
			<view class="zp-hd-rules" style="padding: 10px;">

				<view>大转盘抽奖奖项设置：</view>
				<view>一等奖：苹果14Pro Max526G手机一台<view>
						<view>二等奖：3888元现金红包</view>
						<view>三等奖：888元现金红包</view>
						<view>四等奖：188元现金红包</view>
						<view>五等奖：88元现金红包</view>
						<view>六等奖：38元现金红包</view>
						<view>七等奖：8元现金红包</view>
						<view>八等奖：谢谢参与</view>

						<view></view>

					</view>

					<!-- 抽奖机制 -->
					<view class="title-row fcc">
						<image src="/static/index/img/zp-txt2.png" alt=""></image>
					</view>
					<view class="zp-about" style="padding: 10px;">
						<text><strong style="">平台有效会员每推荐一个有效投资会员，即可获得一次抽奖机会，以此类推，多推多得，如有疑问请咨询平台在线客服。</strong><span
								style="color: rgb(255, 0, 0);"></span></text>
					</view>

					<view class="h40"></view>
				</view>

				<view @click="historyBack" class="btn-single-return"></view>
			</view>
			<u-modal :show="show" style="height: 4rem;">
				<view v-if="ismodal==0?true:false"  class="modas">
                     	{{this.message}}
                     </view>
				<view v-else class="modas"> 中奖啦<br>恭喜获得<text style="color: #f40;">【{{content}}】</text><br>
					系统已发放到您的账户</view>
                     
			
				<u-button  size="normal" slot="confirmButton" text="确定" type="error" shape="circle" @click="show = false"></u-button>
			</u-modal>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters,mapActions
	} from 'vuex'
	import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
	export default {
		components: {
			LuckyWheel
		},
		onLoad() {
			console.log(this.$store.state.userInfo);
		},
		data() {
			return {
				ismodal:1,
                index:null,
				message:'',
				show: false,
				defaultStyle: {},
				content: '',
				blocks: [{
					padding: '1.5rem',
					imgs: [{
						src: '../../../static/img/my/zp.png',
						width: '88vw',
						height: '88vw',
						top: '4vw'
					}]
				}],
				prizes: [{
						fonts: [{
							text: '一等奖',
							top: '10%',
							fontColor: '#dd0000'
						}],
						background: '#e9e8fe'
					},
					{
						fonts: [{
							text: '二等奖',
							top: '10%',
							fontColor: '#dd0000'
						}],
						background: '#ffd165'
					},
					{
						fonts: [{
							text: '三等奖',
							top: '10%',
							fontColor: '#dd0000'
						}],
						background: '#e9e8fe'
					},
					{
						fonts: [{
							text: '四等奖',
							top: '10%',
							fontColor: '#dd0000'
						}],
						background: '#ffd165'
					},
					{
						fonts: [{
							text: '五等奖',
							top: '10%',
							fontColor: '#dd0000'
						}],
						background: '#e9e8fe'
					},
					{
						fonts: [{
							text: '六等奖',
							top: '10%',
							fontColor: '#dd0000'
						}],
						background: '#ffd165'
					},
					{
						fonts: [{
							text: '七等奖',
							top: '10%',
							fontColor: '#dd0000'
						}],
						background: '#e9e8fe'
					},
					{
						fonts: [{
							text: '谢谢参与',
							top: '10%',
							fontColor: '#dd0000'
						}],
						background: '#ffd165'
					},
				],
				buttons: [{
						radius: '35px',
						background: '#aa0000'
					},
					{
						radius: '45px',
						background: '#afc8ff'
					},
					{

						pointer: false,
						// fonts: [{
						// 	text: '',
						// 	top: '-20px',
						// 	fontColor: '#ffffff',
						// 	fontSize: '30px'
						// }],
						imgs: [{
							src: '../../../static/img/my/zhi.png',
							width: '',
							height: '100px',
							top: '-53px',
						}]
					},
				],
			}
		},
		computed: {
			...mapGetters(['getUserInfo']),
			// ...mapGetters(['userInfo']),
		},
		async mounted() {
			// 在组件加载时触发获取用户信息的 action
			await this.fetchUserInfo();
		},
		methods: {
			drawCord(){
				const param = {
					userId: this.getUserInfo.userId,
					drawType: 1,//会员等级
				
				}
				this.$request.post('/DrawRecord/start', JSON.stringify(param))
					.then(res => {
						if (res.code == 200) {
							this.index = res.data.prizeType
							this.content = res.data.prizeName
							 this.ismodal=1
							// 调用stop停止旋转并传递中奖索
						  	this.fetchUserInfo();
						}
						
					})
					.catch(error => {
				       this.message="今日抽奖次数用完"
					   this.ismodal=0
					});
			},
			...mapActions(['fetchUserInfo']),
			// 点击抽奖按钮触发回调
			 startCallBack() {
				 this.drawCord()
				 if(this.getUserInfo.drawCount>0){
					 // 先开始旋转
					 this.$refs.myLucky.play()
					 // 使用定时器来模拟请求接口
					 setTimeout(() => {
					 	// 假设后端返回的中奖索引是0
					    this.$refs.myLucky.stop(this.index)
					 }, 3000)
				 }else{
				    this.show = true
				 }
				
			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				// 中奖啦
				// 恭喜获得【38.00元现金红包】
				// 系统已发放到您的账户
				// 好的

				// 奖品详情
				this.show = true
				console.log(prize)
			}
		}
	}
</script>
<style>
	.modas {
		color: #7a312d;
		text-align: center;
		font-size: 4.5vw;
		line-height: 6vw;
	}
  /deep/.u-button--circle{
		width: 6rem;
		    text-align: center;
		    margin: 0 auto;
	}
</style>